<template>
  <div ref="ddEchart" :data="ChartData" style="width: 100%; height: 100%"></div>
</template>
<script>
export default {
  props: {
    ChartData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {}
  },
  methods: {
    list () {
      console.log(this.ChartData)
      const Chart = this.$echarts.init(this.$refs.ddEchart)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: '2%',
          textStyle: {
            color: 'white'
          },
          itemGap: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: { color: 'rgba(255,255,255,0.70)' }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgb(0,0,0)'
            }
          }
        },
        // this.ChartData.ydata,
        yAxis: {
          type: 'category',
          data: this.ChartData.ydata,
          axisLine: {
            lineStyle: { color: 'rgba(255,255,255,0.70)' }
          }
        },
        series: this.ChartData.sdata
      }

      Chart.setOption(option)
      window.addEventListener('resize', function () {
        Chart.resize()
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.list()
    })
  }
}
</script>
